<template>
	<view class="u-waterfall" @click="itemClick">
		<view id="u-left-column" class="u-column u-left-column">
			<view v-for="(item, index) in leftList" :key="item.id" class="goods-item">
				<view class="rela">
					<image :src="item.pic_url != undefined ? item.pic_url : item.weVideo.pic_url" mode="widthFix"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
						lazy-load style="width: 100%;"
						:style="{'min-height':item.goodslist.goodlist != ''?'108rpx':'0'}" />
					<image class="play"
						:src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"></image>
					<view class="cover" v-if="item.review_status == 0"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id">
						<text class="cover-title" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">审核中</text>
					</view>
					<view class="cover" v-if="item.review_status == 2"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id">
						<text class="cover-title" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">审核未通过</text>
					</view>

					<!-- 11.17 存在商品 -->
					<view v-if="item.goodslist.goodlist != ''" class="addshop u-line-2"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
						:style="{color:'#000'}">
						<!-- v-for="(items,indexs) in item.goodslist.goodlist" :key="indexs" -->
						<view class="addsop" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">
							<view class="image" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
								:data-likeid="item.id">
								<image :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
									:data-likeid="item.id" class="image" :src="item.goodslist.goodlist[0].cover_pic"
									mode=""></image>
							</view>
							<view :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
								:data-likeid="item.id" class="text u-line-4">
								{{item.goodslist.goodlist[0].name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 10.14 没有标题和描述时不显示 -->
				<view class="concern u-line-2" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
					:data-likeid="item.id" style="width: 100%;" :style="{color:'#000'}"
					v-if="item.title || item.describe">
					{{item.title != undefined ? (item.title != '' ? item.title : item.describe) : (item.weVideo.title != '' ? item.weVideo.title : item.weVideo.describe)}}
				</view>
				<view v-if="item.catetitle" class="concern u-line-2"
					:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
					style="width: 100%;" :style="{color:'#000'}">
					{{item.catetitle}}
				</view>
				<!-- 11.17 存在商品 -->
				<!-- <view v-if="item.goodslist.goodlist != ''" class="concern u-line-2"
					:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
					style="width: 100%;" :style="{color:'#000'}">
					<view class="" v-for="(items,indexs) in item.goodslist.goodlist" :key="indexs">
						{{items.name}}
					</view>
				</view> -->
				<view class="avatar" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
					:data-likeid="item.id">
					<view class="" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
						:data-likeid="item.id" style="flex: 1;">
						<image :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
							:src="item.user.userInfo.avatar != undefined ? item.user.userInfo.avatar : item.weVideo.user.userInfo.avatar">
						</image>
						<text class="u-line-1" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id"
							style="flex: 1;width: 160rpx;">{{item.user.nickname != undefined ? item.user.nickname : item.weVideo.user.nickname}}</text>
					</view>
					<view class="delete" @click.stop="del(item.id)" v-if="isdel">
						删除
					</view>
					<view class="delete" @click.stop="delup(item.video_id)" v-if="isdelup">
						取消点赞
					</view>
					<view class="delete" @click.stop="delcol(item.video_id)" v-if="isdelcol">
						取消收藏
					</view>
				</view>
			</view>
		</view>
		<view id="u-right-column" class="u-column u-right-column">
			<view v-for="(item, index) in rightList" :key="item.id" class="goods-item">
				<view class="rela">
					<image :src="item.pic_url != undefined ? item.pic_url : item.weVideo.pic_url" mode="widthFix"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
						lazy-load style="width: 100%;"
						:style="{'min-height':item.goodslist.goodlist != ''?'108rpx':'0'}" />
					<image class="play"
						:src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"></image>
					<view class="cover" v-if="item.review_status == 0"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id">
						<text class="cover-title" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">审核中</text>
					</view>
					<view class="cover" v-if="item.review_status == 2"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id">
						<text class="cover-title" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">审核未通过</text>
					</view>

					<!-- 11.17 存在商品 -->
					<view v-if="item.goodslist.goodlist != ''" class="addshop u-line-2"
						:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
						:style="{color:'#000'}">
						<!-- v-for="(items,indexs) in item.goodslist.goodlist" :key="indexs" -->
						<view class="addsop" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id">
							<view class="image" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
								:data-likeid="item.id">
								<image :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
									:data-likeid="item.id" class="image" :src="item.goodslist.goodlist[0].cover_pic"
									mode=""></image>
							</view>
							<view :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
								:data-likeid="item.id" class="text u-line-4">
								{{item.goodslist.goodlist[0].name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 10.14 没有标题和描述时不显示 -->
				<view class="concern u-line-2" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
					:data-likeid="item.id" style="width:100%" :style="{color:'#000'}"
					v-if="item.title || item.describe">
					{{item.title != undefined ? (item.title != '' ? item.title : item.describe) : (item.weVideo.title != '' ? item.weVideo.title : item.weVideo.describe)}}
				</view>
				<view v-if="item.catetitle" class="concern u-line-2"
					:data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
					style="width: 100%;" :style="{color:'#000'}">
					{{item.catetitle}}
				</view>
				<view class="avatar" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
					:data-likeid="item.id">
					<view class="" style="flex: 1;">
						<image :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id" :data-likeid="item.id"
							:src="item.user.userInfo.avatar != undefined ? item.user.userInfo.avatar : item.weVideo.user.userInfo.avatar">
						</image>
						<text class="u-line-1" :data-id="operaid == 1 || operaid == 2 ? item.video_id : item.id"
							:data-likeid="item.id"
							style="flex: 1;width: 160rpx;">{{item.user.nickname != undefined ? item.user.nickname : item.weVideo.user.nickname}}</text>
					</view>
					<view class="delete" @click.stop="del(item.id)" v-if="isdel">
						删除
					</view>
					<view class="delete" @click.stop="delup(item.video_id)" v-if="isdelup">
						取消点赞
					</view>
					<view class="delete" @click.stop="delcol(item.video_id)" v-if="isdelcol">
						取消收藏
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let atime = ''
	export default {
		name: "u-indexware",
		props: {
			isdel: {
				type: Boolean,
				default: false
			},
			isdelup: {
				type: Boolean,
				default: false
			},
			isdelcol: {
				type: Boolean,
				default: false
			},
			operaid: {
				type: Number,
				default: 0
			},
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			addTime: {
				type: [Number, String],
				default: 200
			}
		},
		provide() {
			return {
				uWaterfall: this
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				attrShow: 0,
				goods: null,
				imgprefix: this.$siteInfo.imgroot,
			}
		},
		onHide() {
			clearTimeout(atime)
		},
		watch: {
			copyFlowList(nVal, oVal) {
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.length == 0) {
					this.emptyList()
				} else {
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
			// this.imgprefix = this.$siteInfo.imgroot
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				if (!this.tempList.length) return;
				let leftRect = await this.uGetRect('#u-left-column');
				let rightRect = await this.uGetRect('#u-right-column');
				let item = this.tempList[0];
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					atime = setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},

			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},

			buy(item) {
				this.goods = item;
				this.attrShow = Math.random();
			},

			itemClick(e) {
				if (e.target.dataset.id) {
					this.$emit('itemClick', e.target.dataset.id, e.target.dataset.likeid);
				}
			},
			del(id) {
				this.$emit('click', id)
			},
			delup(id) {
				this.$emit('delik', id)
			},
			delcol(id) {
				this.$emit('decolk', id)
			},
			emptyList() {
				this.leftList = [];
				this.tempList = [];
				this.rightList = [];
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
	}

	.u-column {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	.u-right-column {
		margin-right: 0;
		margin-left: 1rpx;
	}

	.u-left-column {
		margin-left: 0;
		margin-right: 1rpx;
	}

	.demo-image {
		width: 351rpx;
	}

	/* .goods-item {
		width: 351rpx;
		background-color: #fff;
		margin-top: 20upx;
		overflow: hidden;
		border-radius: 16upx;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
	} */

	.goods-title {
		/* font-size: 26upx;
		color: #373737; */
		padding: 0 20upx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
	}

	.goods-content {
		padding: 0 20upx;
		margin: 12upx 0;
	}

	.gotoli {
		width: 100%;
		text-align: right;
		margin-bottom: 28rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.describe {
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
		// font-size: 22upx;
	}

	.content {
		/* font-size: 18upx;
		color: #b0b0b0; */
		color: rgba(0, 0, 0, 0.64);
		font-size: 20rpx;
		line-height: 36rpx;
		font-weight: 700;
	}

	.u-waterfall {
		// margin-top: 152rpx;
		// background: #000000;
		justify-content: space-between;

		>view {
			// width: 350px;
			text-align: center;

			image {
				will-change: transform;
			}
		}

		.rela {
			position: relative;

			// 11.17 商品
			.addshop {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				width: 326rpx;
				height: 102rpx;
				background-color: #FFFFFF;
				border-radius: 6rpx;
				padding: 8rpx;
				font-size: 16rpx;

				.addsop {
					display: flex;
					margin-bottom: 8rpx;
				}

				.image {
					width: 86rpx;
					height: 86rpx;
				}

				.text {
					width: 234rpx;
					margin-left: 12rpx;
				}
			}

			.cover {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background: rgba(0, 0, 0, .7);
				color: #FFFFFF;
				font-size: 32rpx;
				z-index: 2;

				.cover-title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.play {
				position: absolute;
				/* width: 80rpx;
				height: 80rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%); */
				width: 40rpx;
				height: 40rpx;
				top: 30rpx;
				right: 30rpx;
			}
		}

		.goods-item {
			// position: relative;
			// margin-bottom: 8px;
			overflow: hidden;
			// font-size: 0;
			background: #fff;
			// width: 175px;
			width: 100%;
			// border-radius: 10rpx;
			// margin: 0 auto 16rpx;
			margin: 0 auto 2rpx;
			text-align: left;

			.title {
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 100%;
				transform: translateX(-50%);
				max-height: 60%;
				color: #fff;
				font-size: 26rpx;
				padding: 5rpx;
				overflow-y: auto;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, .4);
			}

			.concern {
				// display: inline-block;
				font-size: 26rpx;
				padding: 5rpx;
				color: #353535;
				text-align: left;
			}

			.avatar {
				display: flex;
				font-size: 24rpx;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 10rpx 24rpx;

				>view {
					display: flex;
					align-items: center;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
